<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <!-- script标签上写了type="text/babel".则这个script里面的代码就会被babel解析 -->
    <script type="text/babel">
      const obj = {
        name: 'lt',
        hobby: '去找hj',
      }
      // jsx中动态的插入数据,要使用插值表达式: {}. 在这个插值表达式中可以直接写js表达式

      // jsx中插值表达式的两个问题:
      // 1. 插值表达式可以写在哪里:
      // 1.1 可以写在标签的子节点,写在这里就是为了渲染
      // 1.2 可以写在属性的值的位置上,写在这里就是为了动态的修改属性的值
      // 2. 插值表达式里面可以写什么
      // 就是可以写js表达式: 一段代码执行之后有结果
      // 表达式: 变量, 常量, 字面量,数组,对象, 函数,函数调用,运算.
      // 变量和常量的声明语句不是表达式
      // 分支语句,循环语句不是表示式

      const arr = ['a', 'b']
      function fn() {
        return 'hahaha'
      }
      const div = (
        <div>
          <h1>{obj.name}</h1>
          <p>{obj.hobby}</p>
          <button disabled={true}>按钮</button>
          {/*注意: 数组可以直接渲染,但是渲染时会把数组中的每一个元素,当做一个子节点渲染*/}
          <div>{arr}</div>
          <div>{1}</div>
          <div>{'123'}</div>
          {/*不要直接渲染布尔值,没有任何意义. 所以不渲染*/}
          <div>{true}</div>
          {/*不要直接渲染布尔值,没有任何意义  所以不渲染*/}
          <div>{undefined}</div>
          {/*不要直接渲染普通对象,会报错*/}
          <div style={{ color: 'red' }}>123</div>
          {/*函数调用,渲染的是返回值*/}
          <div>{fn()}</div>
          {/*函数声明一定是表达式,但是不要渲染,主要用于注册事件*/}
          <button
            onClick={function () {
              alert('事件触发了')
            }}
          >
            按钮
          </button>
          <div>{1 + (((1 * 2) / 10) % 2)}</div>
          <div>{}</div>
        </div>
      )
      ReactDOM.render(div, document.getElementById('root'))
    </script>
  </body>
</html>
